<template>
  <el-container class="section-wrapper">
    <el-container>
      <el-aside class="section-menu" width="'auto'">
        <c-menu :data-list="menuList" :active-index="activeIndex" :collapse="isCollapse"></c-menu>
      </el-aside>
      <el-container class="section-content">
        <el-header class="section-header">
          <div class="tools">
            <div class="btn-collapse" @click="isCollapse = !isCollapse">
              <el-icon>
                <Expand v-if="isCollapse" />
                <Fold v-else />
              </el-icon>
            </div>
            <div class="breadcurmb">
              <c-breadcurmb></c-breadcurmb>
            </div>

            <div class="tools-right">
              <c-i18n-btn></c-i18n-btn>

              <div class="btn-dropdown">
                <el-dropdown :popper-options="{ modifiers: [{ name: 'computeStyles', options: { adaptive: false } }] }">
                  <div class="el-dropdown-link">
                    <el-avatar :size="32" :src="logo"></el-avatar><span class="name">{{ userInfoStore.username }}</span>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item icon="User"><c-i18n>个人信息</c-i18n></el-dropdown-item>
                      <el-dropdown-item icon="SwitchButton" @click="logout"><c-i18n>退出系统</c-i18n></el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </div>
          <c-tabs></c-tabs>
        </el-header>
        <el-main>
          <router-view v-slot="{ Component, route }">
            <transition :name="String(route.meta.transition || '') || 'fade'" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </el-main>
        <el-footer class="section-footer">© {{ date }} All rights reserved;&ensp;<a href="">CodeFront website</a> 保留所有权利。</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { format } from 'date-fns'
import { useMenuStore } from '@/stores/menu'
import { useTabStore } from '@/stores/tab'
import { useUserInfoStore } from '@/stores/userInfo'

import logo from '@/assets/images/logo.png'
import { useTokenStore } from '@/stores/token'

const menuStore = useMenuStore()
const tabStore = useTabStore()
const userInfoStore = useUserInfoStore()
const tokenStore = useTokenStore()

const isCollapse = ref(false)
const menuList: any[] = menuStore.getMenuList
const activeIndex = ref(location.pathname)

const router = useRouter();

// 监听路由变化，改变菜单选中项
router.beforeEach((to, from, next) => {
  activeIndex.value = to.path
  next()
})

const date = format(new Date(), 'yyyy')

const logout = () => {
  router.push('/login').then(() => {
    menuStore.$reset()
    tabStore.$reset()
    userInfoStore.$reset()
    tokenStore.$reset()
  })
}
</script>

<style lang="scss" scoped>
.section-wrapper {
  height: 100%;
}

.section-header {
  padding: 0;
  height: auto;
}

.section-menu {
  background: #304156;
}

.section-content {
  min-width: 600px;
}

.section-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tools {
  display: flex;
  align-items: center;
  height: 50px;
  padding-right: 8px;

  .btn-collapse {
    float: left;
    width: 50px;
    height: 100%;
    line-height: 50px;
    padding: 0px 15px;
    font-size: 20px;
    cursor: pointer;
  }

  .breadcurmb {
    flex: 1;
  }

  .tools-right {
    float: right;
    display: flex;
    align-items: center;
    height: 100%;

    .btn-dropdown {
      .el-dropdown {
        display: flex;
        align-items: center;
        height: 100%;

        &:hover {
          .el-dropdown-link {
            background: rgba(0, 0, 0, 0.05);
          }
        }
      }

      .el-dropdown-link {
        height: 100%;
        padding: 8px;
        transition: all 0.2s ease-in-out;
        cursor: pointer;

        .el-avatar {
          background: unset;
        }

        .name {
          margin-left: 8px;
        }
      }
    }
  }
}

.el-dropdown-link {
  display: flex;
  align-items: center;

  &:focus-visible {
    outline: none;
  }
}
</style>
